<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head>
    <th:block th:include="include :: header('新增流程')" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <th:block th:include="include :: bootstrap-select-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-process-save" method="post">
        <div class="form-group" >
            <label class="col-sm-3 control-label"><span style="color: red;" > *</span> 流程类别：</label>
            <div class="col-sm-8">

                <select class="form-control" id="category" name="category" th:with="type=${@dict.getType('act_category')}">
                    <option value="">所有</option>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                </select>
                <span class="help-block m-b-none" style="color: #b00cd5"><i class="fa fa-info-circle" style="color: red">
                </i> 请先选择流程分类</span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">流程文件：</label>
            <div class="col-sm-8">
                <input id="multipleFile" multiple name="files" type="file" class="file-loading">
                 <span class="help-block m-b-none" style="color: red"><i class="fa fa-info-circle" style="color: #0c7cd5">
                </i> 流程文件格式支持.zip和.bpmn、bpmn20.xml、.xml</span>
            </div>
        </div>

    </form>
</div>
<div th:include="include::footer"></div>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<th:block th:include="include::bootstrap-select-js"/>
<script type="text/javascript" th:inline="javascript">
	var prefix = ctx + "activiti/process";
        var allExtentision=[ 'zip', 'bar','bpmn','bpmn20.xml','xml' ];
    // 多图上传
    $("#multipleFile").fileinput('refresh',{
        theme: "fas",
        language: "zh",//配置语言
        uploadUrl: prefix + '/add',
        uploadAsync: false,// 是否异步上传，默认true，false时为批量上传，事件不起作用
        uploadClass: "btn btn-primary",//设置上传按钮样式
        removeClass: "btn btn-danger",
        dropZoneEnabled: true,//是否显示拖拽区域
        dropZoneTitle: '文件拖到这里即可上传！', // 拖拽区域提示内容
        browseOnZoneClick: true,
        uploadLabel: "上传",//设置整体上传按钮的汉字
        removeLabel: "移除",//设置整体删除按钮的汉字
        showPreview: true,// 显示预览信息： true 显示 , false 不显示
        showCaption: true,// 显示标题，显示，false不显示
        showClose: true,//布尔值，是否显示预览界面的关闭图标。默认为true。只有当showPreview为true或者在预览模板中使用{close}标签时才会被解析
        showUpload: true, //显示整体上传的按钮
        showUploadedThumbs: true,//布尔值，是否在预览窗口中持续显示已经上传的文件缩略图（用于ajax上传），直到按下删除/清除按钮。默认值为true。当设置为false时，下一批选择上传的文件将从预览中清除这些已经上传的文件缩略图。
        showRemove: true,//显示整体删除的按钮
        showBrowse: true,//布尔值，是否显示文件浏览按钮。默认为true。
        overwriteInitial: false,//布尔值，是否要覆盖初始预览内容和标题设置。默认为true，因此当新文件上传或文件被清除时任何initialPreview内容集将被覆盖。将其设置为false将有助于始终显示从数据库中保存的图像或文件，尤其是在使用多文件上传功能时尤其有用。
        maxFileSize: 1024*100,//文件大小限制100MB，单位kb,具体取决于服务端配置或七牛云配置中的限制大小
        maxFileCount: 100,//允许最大上传数，可以多个，
        enctype: 'multipart/form-data',
        // 这是允许上传的文件扩展名
        allowedFileExtensions : allExtentision,
        // 向后台传递参数,可以是方法返回javaScript参数，也可以是javascript对象
        uploadExtraData: function (){

          var categoryVal=$("#category").val();

          // 获取流程分类
          //   console.log("向后台传递的参数是：",categoryVal);
            var data={
                category: categoryVal
            };
            return data;
        }
    });
    // 文件选择完后
    // $("#multipleFile").on("filebatchselected",function (){
    //     console.log("文件上传事件：");
    //     categoryVal=$("#category").val();
    //     console.log("流程分类是：",categoryVal);
    //     // 文件选择完直接调用上传方法
    //     // $(this).fileinput("upload");
    // });
    // 上传完成与否标记
    var uploadFlag=false;
    // 批量上传，同步执行
    $("#multipleFile").on('filebatchuploadsuccess',function (event,data,previewId,Index){
        console.log("批量上传全部成功时!");
        console.log("this:",this);

        console.log("return data：",data);

        var rsp = data.response;
        if (rsp.code==0){
            $.modal.msg("批量上传文件成功",modal_status.SUCCESS);
            uploadFlag=false;
        }else{
            $.modal.alert(rsp.msg,modal_status.FAIL);
            // $.modal.msg(rsp.msg,modal_status.FAIL);
            uploadFlag=false;
        }
        console.log("return rsp：",rsp);

        // 弹框确认上传成功

        uploadFlag=true;
    });
    // 当单个文件上传时，异步执行
    $("#multipleFile").on('fileuploaded',function (event,data,previewId,Index){
        console.log("单个文件上传完成!");
        console.log("this:",this);
        log.info("return data：",data);
        var rsp = data.response;
        log.info("return rsp：",rsp);
        // 弹框确认上传成功
        if (rsp.code==0){
            $.modal.msg("单个文件上传成功",modal_status.SUCCESS);
        }else{
            $.modal.alert(rsp.msg,modal_status.FAIL);
            // $.modal.msg(rsp.msg,modal_status.FAIL);
            uploadFlag=false;
        }

    });



    $("#form-process-save").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            // 上传选择的文件，插件中选择文件已上传，此处调用不会再次上传

            // $.modal.confirm("确定要将部署的流程【"+processId+"】转换为模型吗？", function () {
            //     var url = prefix + "/convertToModel/" + processId;
            //     $.operate.get(url);
            // });
            //刷新表格
            parent.location.reload();


        }
    }
</script>
</body>
</html>
